<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>个人中心</span>
    </div>
    <div class="readerdetial">
      <div class="userinfoitem"><span>姓名：<a>{{ readerdetial.name }}</a></span></div>
      <div class="userinfoitem"><span>读者证编号：<a>{{ readerdetial.number }}</a></span></div>
      <div class="userinfoitem"><span>联系方式：<a>{{ readerdetial.contact }}</a></span></div>
      <div class="userinfoitem"><span>用户等级：<a>{{ readerdetial.level }}</a></span>
      </div>
      <div style="text-align: right">
        <el-button type="primary" @click="changeinfo">修改信息</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { getUserDetial } from '@/api/user'
import { getToken } from '@/utils/auth'
export default {
  props: {
    readerdetial: {
      type: Object,
      default: () => {
        return {
          name: '小杰',
          number: 123456789,
          contact: 'lijiext@gmail.com',
          level: '白金'
        }
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    changeinfo() {
      this.activeTab = 'account'
    },
    getInfo() {
      const token = getToken()
      const data = {
        'id': token
      }
      getUserDetial(data).then(response => {
        this.readerdetial = response
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '获取用户信息失败！',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .userinfoitem{
    span {
      color: #777777;
    }
    a {
      color: black;
    }
    padding: 10px 0;
  }

</style>
